<template>
  <view class="longbingbing-service-list-item">
    <block>
      <view @tap.stop="goDetail" class="longbingbing-service-item flex-warp" v-if="o.type===1">
        <!-- #ifdef H5 -->
        <view class="cover radius-16">
          <view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
        <!-- #endif -->

        <view class="flex-1 ml-md">
          <view :class="[{'flex-between':info.show_salenum}]" style="height:38rpx">
            <view class="f-mini-title c-title text-bold ellipsis" :class="[{'max-270':info.show_salenum}]">
              {{ info.title }}
            </view>
            <view class="f-caption c-caption" v-if="info.show_salenum">
              已售{{ info.total_sale | handleFormatNum}}
            </view>
          </view>
          <view class="f-caption c-caption ellipsis"
                :style="{margin:info.member_price?'6rpx 0 0 0':'10rpx 0'}" style="display: flex;align-items: center;">
            <text>{{info.time_long}}分钟  <text style="margin-right: 10rpx;margin-left: 10rpx;">|</text></text>
            <view class="ellipsis" :style="{maxWidth:'240rpx'}">
              {{ info.sub_title || '' }}
            </view>
          </view>
          <!-- <view class="flex-y-center f-caption c-caption">
            <i class="iconfont iconshijian" style="font-size:24rpx;margin-right: 5rpx;"
              :style="{color:primaryColor}"></i>{{info.time_long}}分钟
          </view> -->
          <view class="flex" :style="{marginTop:info.member_price ?'':'16rpx', alignItems: 'center'}">
            <view class="flex-1">
              <view class="flex-y-center f-desc c-caption ellipsis"
                    :style="{fontWeight: '600', width:from == 'technician-info' ?'280rpx':attendant_name.length===5?'220rpx':attendant_name.length===4?'240rpx':attendant_name.length===3?'260rpx':'280rpx'}">
                <view class="flex-y-baseline f-icontext c-warning" style="font-size: 20rpx;margin-right: 16rpx">¥<view class="f-sm-title" style="color: #F80800;font-size: 48rpx;">
                  {{ info.price }}
                </view>
                  <!--<view class="f-caption" v-if="info.show_unit" style="font-weight: 500;color: #F80800;">/{{info.show_unit}}</view> -->

                </view>
                <view class="huiyuan" v-if="info.member_price">
                  <text  style="font-size:20rpx;margin-right: 12rpx;color: #2D2D31;font-weight: 400;">会员价</text>
                  <text style="font-size:20rpx;color: #2D2D31;font-weight: bold;">
                    <text style="font-size: 20rpx;">¥</text>
                    <text  style="font-size: 28rpx;margin-right: 6rpx;text-decoration-line: line-through;">{{ info.member_price }}</text>
                    <text style="font-size: 20rpx;font-weight: 500;">/{{info.show_unit}}</text>
                  </text>
                </view>

                <view class="member-canbuy-level" v-if="info.member_info && info.member_info.title">
                  <view class="text flex-center">{{info.member_info.title}}专享</view>
                </view>
              </view>

              <!-- <view class="flex-y-center f-paragraph c-title" style="height: 30rpx;"
                v-if="info.member_price">
                <view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
                </view>
                <view class="memberdiscount-price flex-center ml-sm">
                  会员价
                </view>
              </view> -->
            </view>
            <auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
                  :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
                  :style="{width:from == 'technician-info' ?'140rpx':attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'140rpx'}">
              <view class="flex-between">
                <view></view>
                <view class="item-btn flex-center f-caption c-base"
                      :style="{ background: primaryColor }">
                  去下单
                </view>
              </view>
            </auth>
          </view>
        </view>
      </view>

      <view @tap.stop="goDetail" class="longbingbing-service-item-2 flex-warp" v-if="o.type===2">
        <view class="cover rel">
          <!-- #ifdef H5 -->
          <view class="cover">
            <view class="h5-image cover" :style="{ backgroundImage : `url('${info.cover}')`}">
            </view>
          </view>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <image mode="aspectFill" lazy-load class="cover" :src="info.cover"></image>
          <!-- #endif -->
          <view class="time-long flex-center abs">
            <view class="time-text">{{ info.time_long }}分钟</view>
          </view>
          <view class="price flex-center c-base abs">
            <view class="flex-y-baseline">
              <view class="f-icontext">¥</view>
              <view class="f-mini-title">{{ info.price }}</view>
            </view>
          </view>
        </view>
        <view class="flex-1 ml-md" style="width: 478rpx">
          <view class="flex-between">
            <view class="f-mini-title c-title text-bold ellipsis">
              {{ info.title }}
            </view>
            <view class="can-service-btn md flex-center rel">
              <view class="bg abs" :style="{ background: primaryColor }"></view> <span
                class="text flex-center abs" :style="{ color: primaryColor }"> 可预约 半小时内 </span>
            </view>
          </view>
          <view class="flex-between">
            <view class="f-icontext mt-sm mb-sm ellipsis" style=" color: #5a677e"
                  :style="{ maxWidth: $t('action.attendantName').length > 3 ? '200rpx' : '' }">
              {{ info.sub_title || '' }}
            </view>
            <view class="distance f-icontext flex-y-center">
              <view class="text-bold">
                最近{{ $t('action.attendantName') }}
              </view>
              <i class="iconfont iconjuli1"></i>附近
            </view>
          </view>
          <view class="flex-y-center f-paragraph c-title" style="height: 30rpx;" v-if="info.member_price">
            <view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
            </view>
            <view class="memberdiscount-price flex-center ml-sm">
              会员价
            </view>
          </view>
          <view class="flex-between" :style="{ marginTop:  info.member_price?'10rpx' : '12rpx'}">
            <view class="flex-y-center" style="min-height:52rpx">
              <view class="flex-warp"
                    :style="{ maxWidth: from == 'technician-info' ?'300rpx': $t('action.attendantName').length === 3 ? '280rpx' : $t('action.attendantName').length === 4 ? '250rpx' : $t('action.attendantName').length === 5 ? '220rpx' : '300rpx' }"
                    v-if="info.position_title&&info.position_title.length>0">
                <view class="tag-item flex-center"
                      :style="{ color: primaryColor, borderColor: primaryColor }"
                      v-for="(aitem, aindex) in info.position_title" :key="aindex"> {{ aitem }} </view>
              </view>
            </view>
            <auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
                  :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
                  :style="{width:from == 'technician-info' ?'140rpx': attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'140rpx'}">
              <view class="flex-between">
                <view></view>
                <view class="item-btn flex-center f-caption c-base"
                      :style="{ background: primaryColor }">
                  去下单
                </view>
              </view>
            </auth>
          </view>
        </view>
      </view>

      <view @tap.stop="goDetail" class="longbingbing-service-item-3" v-if="o.type===3">
        <view class="cover rel">
          <!-- #ifdef H5 -->
          <view class="cover">
            <view class="h5-image cover" :style="{ backgroundImage : `url('${info.cover}')`}">
            </view>
          </view>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <image mode="aspectFill" lazy-load class="cover" :src="info.cover"></image>
          <!-- #endif -->
          <view class="vip-canbuy pl-md flex-y-center f-icontext c-base abs"
                v-if="info.member_info && info.member_info.title">
            <image class="canbuy-img abs" :src="`${base_img_url}/menu2/vip-canbuy.png`">
            </image>
            {{info.member_info.title}}专享
          </view>
          <view class="time-long flex-center f-icontext c-base abs">
            <i class="iconfont iconshijian4"></i>{{ info.time_long }}分钟
          </view>
        </view>
        <view style="padding: 16rpx">
          <view class="f-title text-bold ellipsis" style="color: #222724">
            {{ info.title }}
          </view>
          <view class="f-caption mt-sm mb-sm ellipsis" style="height: 30rpx; color: rgba(34, 39, 36, 0.6)">
            {{ info.sub_title || '' }}
          </view>
          <view class="f-icontext" style="color: rgba(34, 39, 36, 0.38); margin-top: 12rpx;height:32rpx">
            <block v-if="info.show_salenum">销量{{ info.total_sale | handleFormatNum}}</block>
          </view>
          <view class="flex-center mt-sm" :style="{height: info.member_price ? '28rpx':'8rpx'}">
            <view class="memberdiscount-price-text flex-center" v-if="info.member_price">
              <view class="text flex-center c-base">会员价</view>
              <view class="price flex-center flex-y-baseline text-bold">
                ¥
                <view class="num">{{ info.member_price }}</view>
              </view>
            </view>
            <view class="flex-1"></view>
          </view>
          <view class="flex-between">
            <view class="flex-y-center ellipsis" style="max-width: 170rpx">
              <view class="flex-y-baseline f-paragraph" style="color: #f84e2c">
                ¥
                <view style="font-size: 18px">{{ info.price }}</view>
                <view class="f-caption" v-if="info.show_unit">/{{info.show_unit}}</view>
              </view>
              <!-- 	<view class="f-caption text-delete" style="color: rgba(34, 39, 36, 0.38); margin-left: 8rpx">
              ¥{{ info.init_price }}
            </view> -->
            </view>
            <auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
                  :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose" :style="{width:'130rpx'}">
              <view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
                <view class="flex-center">去下单</view>
              </view>
            </auth>
          </view>
        </view>
      </view>

      <view @tap.stop="goDetail" class="flex longbingbing-service-item-4 radius-16 fill-base" v-if="o.type===4">
        <!-- #ifdef H5 -->
        <view class="cover radius-16">
          <view class="h5-image radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
        <!-- #endif -->

        <view class="flex-1 ml-md">
          <view class="f-mini-title c-title text-bold ellipsis max-450">
            {{ info.title }}
          </view>
          <view class="mt-sm service-time rel">
            <image class="abs bg" :src="`https://api.huixuananmm.com/admin/anmo/technician/service-time-bg.png`"
                   mode="widthFix"></image>
            <view class="rel flex-y-center">
              <image class="time" :src="`https://api.huixuananmm.com/admin/anmo/technician/service-time.png`"
                     mode="aspectFill"></image>
              <view class="f-icontext c-base flex-center time-text">{{info.time_long}}分钟</view>
              <view class="f-icontext ml-lg salenum" style="color: #FB766B;" v-if="info.show_salenum">
                已售{{info.total_sale | handleFormatNum}}</view>
            </view>
          </view>
          <view class="f-caption c-caption ellipsis max-450" style="margin-top: 16rpx;">
            {{ info.sub_title || '' }}
          </view>
          <!-- <view class="flex-y-center f-caption c-caption"><i class="iconfont iconshijian"
              style="font-size:24rpx;margin-right: 5rpx;"
              :style="{color:primaryColor}"></i>{{info.time_long}}分钟
          </view> -->
          <view class="mt-sm"
                :class="[{'flex-y-center':!info.member_price},{'flex-y-end':info.member_price}]">
            <view class="flex-1">
              <view class="flex-y-center f-desc c-caption ellipsis"
                    :style="{width:from == 'technician-info' ?'280rpx':attendant_name.length===5?'220rpx':attendant_name.length===4?'240rpx':attendant_name.length===3?'260rpx':'280rpx'}">
                <view class="flex-y-baseline f-icontext c-warning mr-sm">¥<view class="f-sm-title">
                  {{ info.price }}
                </view>
                  <view class="f-caption" v-if="info.show_unit">/{{info.show_unit}}</view>
                </view>
                <view class="member-canbuy-level" v-if="info.member_info && info.member_info.title">
                  <view class="text flex-center">{{info.member_info.title}}专享</view>
                </view>
              </view>
              <view class="flex-y-center f-paragraph c-title" style="height: 30rpx;"
                    v-if="info.member_price">
                <view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
                </view>
                <view class="memberdiscount-price flex-center ml-sm">
                  会员价
                </view>
              </view>
            </view>
            <auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
                  :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
                  :style="{width:from == 'technician-info' ?'168rpx':attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'168rpx'}">
              <view class="flex-between">
                <view></view>
                <view class="item-btn flex-center f-caption c-base"
                      :style="{ background: primaryColor }">
                  去下单
                </view>
              </view>
            </auth>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from "vuex"
export default {
  components: {},
  props: {
    o: {
      type: Object,
      default () {
        return {}
      }
    },
    from: {
      type: String,
      default () {
        return 'list'
      }
    },
    store_id: {
      type: Number,
      default () {
        return 0
      }
    },
    coach_info: {
      type: Object,
      default () {
        return {}
      }
    },
    info: {
      type: Object,
      default () {
        return {}
      }
    },
    maxWidth: {
      type: String,
      default () {
        return '480rpx'
      }
    }
  },
  data() {
    return {

    }
  },
  computed: mapState({
    plugAuth: state => state.config.configInfo.plugAuth,
    attendant_name: state => state.config.configInfo.attendant_name,
  }),
  methods: {
    // 详情
    goDetail() {
      let {
        id
      } = this.info
      let {
        store_id = 0,
        coach_info = {
          id: 0,
          is_work: 0
        }
      } = this
      let {
        id: coach_id = 0,
        is_work = 0
      } = coach_info
      let url = `/user/pages/detail?id=${id}&store_id=${store_id}&coach_id=${coach_id}&is_work=${is_work}`
      this.$util.goUrl({
        url
      })
    },
    // 选择技-师
    toChoose() {
      let {
        can_buy,
        title
      } = this.info.member_info
      if (!can_buy) {
        let msg = title ? title.includes('会员') ? title : `${title}会员` : '会员'
        this.$util.showToast({
          title: `您还不是${msg}`
        })
        return
      }
      let {
        from
      } = this
      if (from == 'technician-info') {
        this.$emit('order')
        return
      }
      let {
        id
      } = this.info
      let {
        store_id = 0
      } = this
      let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}`
      this.$util.goUrl({
        url
      })
    },
    toEmit(key) {
      this.$emit(key)
    }
  },
  filters: {
    handleFormatNum(val) {
      let text = val
      if (val > 9999) {
        let num = val % 10000
        let num1 = parseInt(val / 10000)
        if (num) {
          text = `${num1}w+`
        } else {
          text = `${num1}w`
        }
      }
      return text
    }
  }
}
</script>

<style scoped lang="scss">
.longbingbing-service-list-item {

  .longbingbing-service-item {
    .cover {
      width: 148rpx;
      height: 148rpx;
    }

    .time-long {
      min-width: 72rpx;
      height: 30rpx;
      padding: 0 5rpx;
      background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
      border-radius: 4rpx;
      font-size: 20rpx;
      color: #FFEEB9;
      margin-right: 16rpx;
    }

    .f-icontext {
      font-size: 18rpx;
    }

    .text-delete {
      font-size: 20rpx;
      color: #B9B9B9;
    }

    .item-btn {
      min-width: 128rpx;
      height: 56rpx;
      text-align: center;
      border-radius: 38rpx;
    }
  }


  .longbingbing-service-item-2 {
    border-radius: 16rpx;

    .cover {
      width: 198rpx;
      height: 198rpx;
      border-radius: 16rpx;
      object-fit: cover;
    }

    .time-long {
      top: 0;
      left: 0;
      min-width: 84rpx;
      height: 32rpx;
      background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
      border-radius: 16rpx 0 16rpx 0;
      color: #ffeeb9;

      .time-text {
        font-size: 24rpx;
        transform: scale(0.8);
      }
    }

    .price {
      bottom: 0;
      right: 0;
      min-width: 104rpx;
      height: 40rpx;
      padding: 0 10rpx;
      background: #fd6951;
      border-radius: 16rpx 0 16rpx 0;

      .f-icontext {
        margin-right: 4rpx;
      }
    }

    .ellipsis {
      max-width: 240rpx;
    }

    .can-service-btn {
      min-width: 160rpx;
      height: 34rpx;
      border-radius: 6rpx;

      .bg {
        width: 100%;
        height: 34rpx;
        opacity: 0.1;
        border-radius: 6rpx;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .text {
        width: 200rpx;
        transform: scale(0.7);
      }
    }

    .can-service-btn.md {
      min-width: 168rpx;

      .text {
        width: 208rpx;
      }
    }

    .distance {
      color: #7f7f7f;
      font-size: 20rpx;

      .iconjuli1 {
        font-size: 22rpx;
        margin-left: 8rpx;
      }
    }

    .tag-item {
      min-width: 40rpx;
      height: 36rpx;
      padding: 0 10rpx;
      font-size: 20rpx;
      border-radius: 8rpx;
      border: 1rpx solid #fff;
      margin: 6rpx 10rpx 6rpx 0;
      transform: rotateZ(360deg);
    }

    .item-btn {
      min-width: 130rpx;
      height: 52rpx;
      border-radius: 8rpx;
      padding: 0 15rpx;
    }
  }

  .longbingbing-service-item-3 {
    width: 345rpx;
    height: auto;
    background: #ffffff;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.06),
    0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
    border-radius: 24rpx;

    .cover {
      width: 100%;
      height: 240rpx;
      border-radius: 24rpx 24rpx 0 0;
    }

    .vip-canbuy {
      bottom: 0;
      width: 100%;
      height: 46rpx;
      background: linear-gradient(270deg, #E32C08 0%, #F84E2C 100%);

      .canbuy-img {
        top: 0;
        right: -1rpx;
        width: 126rpx;
        height: 48rpx;
      }
    }

    .time-long {
      top: 16rpx;
      left: 16rpx;
      min-width: 116rpx;
      height: 40rpx;
      padding: 0 10rpx;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 8rpx;

      .iconfont {
        font-size: 24rpx;
        margin-right: 6rpx;
      }
    }

    .item-btn {
      min-width: 130rpx;
      height: 48rpx;
      border-radius: 8rpx;
      padding: 0 15rpx;
    }
  }

  .longbingbing-service-item-4 {
    padding: 28rpx 30rpx 28rpx 0;
    margin-left: 36rpx;

    .cover {
      width: 180rpx;
      height: 216rpx;
      margin-left: -36rpx;
    }

    .h5-image {
      width: 180rpx;
      height: 216rpx;
    }

    .service-time {
      width: 281rpx;
      height: 34rpx;

      .bg {
        width: 281rpx;
        height: 34rpx;
        left: 0;
        top: 0;
      }

      .time {
        width: 23rpx;
        height: 30rpx;
        margin-left: 9rpx;
      }

      .time-text {
        min-width: 80rpx;
        height: 34rpx;
      }

      .salenum {
        height: 34rpx;
        line-height: 34rpx;
      }
    }

    .time-long {
      min-width: 72rpx;
      height: 30rpx;
      padding: 0 5rpx;
      background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
      border-radius: 4rpx;
      font-size: 20rpx;
      color: #FFEEB9;
      margin-right: 16rpx;
    }

    .text-delete {
      font-size: 20rpx;
      color: #B9B9B9;
    }

    .item-btn {
      min-width: 168rpx;
      height: 68rpx;
      padding: 0 15rpx;
      border-radius: 16rpx;
    }
  }
}
</style>